<template>
  <!-- style="border: 1px solid #000000" -->
  <div align="left">
    <div v-show="noProduce == 0">
      <div style="height: 80px;" class="add-border">
        <el-row>
          <el-col :span="3">
            <div style="display: flex;" class="add-border grid-content-2">
              <el-radio
                v-model="sortType"
                label="11"
                style="margin:auto;"
                border
                @change="sortTypeChange()"
              >默认排序</el-radio>
            </div>
          </el-col>
          <el-col :span="3">
            <div style="display: flex;" class="add-border grid-content-2">
              <el-radio
                v-model="sortType"
                label="21"
                style="margin:auto;"
                border
                @change="sortTypeChange()"
              >价格升序</el-radio>
            </div>
          </el-col>
          <el-col :span="3">
            <div style="display: flex;" class="add-border grid-content-2">
              <el-radio
                v-model="sortType"
                label="22"
                style="margin:auto;"
                border
                @change="sortTypeChange()"
              >价格降序</el-radio>
            </div>
          </el-col>
        </el-row>
      </div>

      <div style="height: 10px;"></div>
      <div style="border: 1px solid #cccccc;"></div>
      <div style="height: 10px;"></div>

      <el-row v-for="(produceShowTagRow, i) in produceShowTagTable" :key="i">
        <el-col :span="6" v-for="(produceShowTag, j) in produceShowTagRow" :key="j">
          <div
            class="add-border grid-content"
            style="display: flex;"
            v-show="produceShowTagTable[i][j] == 1"
          >
            <ProduceSample style="align-self:center; margin:auto;" :ref="'produceSample'+i+j" />
          </div>
        </el-col>
      </el-row>

      <div style="height: 20px;"></div>
      <div style="border: 1px solid #cccccc;"></div>

      <el-row>
        <el-col :span="24">
          <div style="display: flex;">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="16"
              layout="prev, pager, next, jumper"
              :total="produces.length"
              style="margin:auto;"
            ></el-pagination>
            <!-- produces.length -->
          </div>
        </el-col>
      </el-row>
    </div>

    <h1 align="center" v-show="noProduce == 1">没有商品</h1>
  </div>
</template>

<script>
import ProduceSample from "@/components/Store/ProduceSample";

export default {
  name: "StoreProduces",
  data() {
    return {
      width: 4,
      height: 4,

      produces: [],
      currentPage: 1,
      produceShowTagTable: [],
      noProduce: 1,
      sortType: "11",
    };
  },
  components: {
    ProduceSample,
  },
  methods: {
    init(produces) {
      //   console.log(produces);

      this.produces = produces;
      this.currentPage = 1;
      
      this.sortType = "11";
      this.handleCurrentChange(1);

      if (produces == null || produces.length == 0) this.noProduce = 1;
      else this.noProduce = 0;
    },
    handleCurrentChange(page) {
      //   console.log(page);

      var produceShowTagTable = [];
      for (var i = 0; i < this.height; i++) {
        var row = [];
        for (var j = 0; j < this.width; j++) {
          row.push(0);
        }
        produceShowTagTable.push(row);
      }

      var offset = (page - 1) * this.width * this.height;
      var index = 0;
      for (var i in this.$refs) {
        if (index + offset < this.produces.length) {
          //   console.log(this.$refs[i][0]);
          //   console.log(Math.floor(index / 4) + " " + (index % 4));
          this.$refs[i][0].init(this.produces[index + offset]);
          produceShowTagTable[Math.floor(index / 4)][index % 4] = 1;
        } else {
          produceShowTagTable[Math.floor(index / 4)][index % 4] = 0;
        }

        index++;
      }

      this.produceShowTagTable = produceShowTagTable;
    },
    sortTypeChange() {
      //   console.log(this.sortType);

      switch (this.sortType) {
        case "11":
          this.produces.sort((a, b) => {
            return a.produceId - b.produceId;
          });
          break;
        case "21":
          this.produces.sort((a, b) => {
            return a.producePrice - b.producePrice;
          });
          break;
        case "22":
          this.produces.sort((a, b) => {
            return b.producePrice - a.producePrice;
          });
          break;
      }

      //   console.log(this.produces);

      this.handleCurrentChange(1);
    },
  },
  created() {
    this.produceShowTagTable = [];
    for (var i = 0; i < this.height; i++) {
      var row = [];
      for (var j = 0; j < this.width; j++) {
        row.push(0);
      }
      this.produceShowTagTable.push(row);
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.grid-content {
  min-height: 260px;
  /* border: 1px solid #ff0000; */
}

.grid-content-2 {
  min-height: 78px;
  /* border: 1px solid #ff0000; */
}

.add-border {
  border: 1px solid #ffffff;
}
</style>
